<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .a {
        background: rgb(240, 240, 202);
      }
      .b {
        background: rgb(240, 211, 202);
      }

      .c {
        background: rgb(202, 240, 216);
      }

      .active {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <template id="t1">
      <div>
        <h1>代办事项</h1>

        <div style="margin: 10px 0">
          <input type="text" v-model="ename" /> <button @click="add">+</button>
        </div>

        <div style="margin: 10px 0">
          <button :class="{active:searchStatus===''}" @click="searchStatus=''">
            全部
          </button>
          <button
            :class="{active:searchStatus==='1'}"
            @click="searchStatus='1'"
          >
            未完成
          </button>
          <button
            :class="{active:searchStatus==='2'}"
            @click="searchStatus='2'"
          >
            进行中
          </button>
          <button
            :class="{active:searchStatus==='3'}"
            @click="searchStatus='3'"
          >
            已完成
          </button>
        </div>

        <table border="1">
          <thead>
            <tr>
              <th>名称</th>
              <th>状态</th>
              <th>修改状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              :class="statusStyle[e.status]"
              v-for="e in newEvents"
              :key="e.id"
            >
              <td>{{e.name}}</td>
              <td>{{status[e.status]}}</td>
              <td>
                <button v-show="e.status!=='1'" @click="e.status='1'">
                  未完成</button
                ><button v-show="e.status!=='2'" @click="e.status='2'">
                  进行中</button
                ><button v-show="e.status!=='3'" @click="e.status='3'">
                  已完成
                </button>
              </td>
              <td><button @click="del(e.id)">X</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    <script src="./vue.js"></script>
    <script>
      /*
        1. 数据展示
        2. 添加代办事项
      */
      const id = () => Math.ceil(Math.random() * 10000);
      const vm = new Vue({
        el: "#app",
        template: "#t1",
        data: {
          searchStatus: "",
          ename: "",
          statusStyle: {
            1: "a",
            2: "b",
            3: "c",
          },
          status: {
            1: "未完成",
            2: "进行中",
            3: "已完成",
          },
          events: [
            { id: id(), name: "学习css", status: "1" },
            { id: id(), name: "学习html", status: "2" },
            { id: id(), name: "学习js", status: "3" },
          ],
        },
        computed: {
          newEvents() {
            // 搜索过滤
            return this.events.filter(
              (el) =>
                el.status === this.searchStatus || this.searchStatus === ""
            );
          },
        },
        methods: {
          del(id) {
            // 获取数组元素的索引
            const i = this.events.findIndex((el) => el.id === id);
            if (i !== -1) {
              this.events.splice(i, 1);
            }
          },
          add() {
            // 为空时候不做添加
            if (this.ename === "") return;
            this.events.push({ id: id(), name: this.ename, status: "1" });
            // 添加完成后自动清空
            this.ename = "";
          },
        },
      });
    </script>
  </body>
</html>
